<template>
	<view class="statusBar" :style="{'background-color':backgroundColor}">
		<view :style="{'height':barHeight}"></view>
		<view class="bar-content" :style="{'height':$common.getNavBarHeight()+'px'}">
			<slot>
				<image v-if="showBack" @tap="$common.navigateBack()" class="nav-left" src="../../static/img/common/arrow-left.png" mode=""></image>
				<view class="nav-title">{{title}}</view>
			</slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:'StatusBar',
		props:{
			isScroll:{
				type:Boolean,
				default:true
			},
			backgroundColor:{
				type: String,
				default:'rgba(255, 255, 255, 1)'
			},
			title:{
				type: String,
				default:''
			},
		},
		data() {
			return {
				barHeight:uni.getSystemInfoSync()['statusBarHeight'] + 'px',
				showBack:getCurrentPages().length>1
			}
		}
	}
</script>

<style lang="scss" scoped>
	.statusBar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 0 15px;
		z-index: 1996;
		transition: all .5s;
		.bar-content{
			display: flex;
			align-items: center;
			position: relative;
			.nav-left{
				width: 23px;
				height:23px;
				position: absolute;
				z-index: 2;
				top: 50%;
				transform: translateY(-50%);
			}
			.nav-title{
				color: #222;
				font-weight: 500;
				font-size: 17px;
				width: 100%;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				text-align: center;
			}
		}
	}

	
</style>
